<script setup>
import { ref } from 'vue'
import {
  catGetListService,
  catDelCategoryService,
  catAddCategoryService,
  catUpdateCategoryService
} from '@/api/admin/category'
// 表单
const formModel = ref({
  catName: '',
  description: ''
})
const rules = {
  catName: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { pattern: /^\S{2,10}$/, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
}

// 数据
const tableData = ref([])
const total = ref(0)
// 分页
const currentPage = ref(1)
const pageSize = ref(5)
// 获取列表数据
const getList = async () => {
  const res = await catGetListService(currentPage.value, pageSize.value)
  tableData.value = res.data.data
  total.value = res.data.total
}
getList()

// 当前页发送变化
const handleCurrentChange = (value) => {
  currentPage.value = value
  getList()
}

// 操作
const isEdit = ref(false)
const addHandler = () => {
  isEdit.value = false
  formModel.value = {
    catName: '',
    description: ''
  }
}
// 编辑
const handleEdit = (row) => {
  isEdit.value = true
  formModel.value = {
    ...row
  }
}

// 保存
const saveHandler = async () => {
  if (formModel.value.id) {
    await catUpdateCategoryService(formModel.value)
  } else {
    await catAddCategoryService(formModel.value)
  }
  ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
  isEdit.value = false
  currentPage.value = 1 // 重新获取列表数据

  getList()
  formModel.value = {
    catName: '',
    description: ''
  }
}

// 删除
const handleDelete = async (row) => {
  await ElMessageBox.confirm('确定删除吗', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await catDelCategoryService(row.id)
  ElMessage.success('删除成功')
  currentPage.value = 1
  getList()
}
defineOptions({
  name: 'CategoryPage'
})
</script>
<template>
  <el-row>
    <el-col :span="12">
      <el-card style="max-width: 480px">
        <template #header>
          <div
            class="card-header"
            style="display: flex; justify-content: space-between"
          >
            <span>{{ isEdit ? '编辑分类' : '新增分类' }}</span>
            <el-button @click="addHandler" type="primary">新增</el-button>
          </div>
        </template>
        <el-form :model="formModel" :rules="rules">
          <el-form-item prop="catName">
            <label>分类名称</label>
            <el-input v-model="formModel.catName"></el-input>
          </el-form-item>
          <el-form-item>
            <label>分类描述</label>
            <el-input
              v-model="formModel.description"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveHandler" type="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>所有分类</span>
          </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="catName" label="分类名" width="100">
          </el-table-column>
          <el-table-column prop="description" label="分类描述" width="190">
            <template #default="{ row }">
              <div class="ellipsis-container">{{ row.description }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total ,prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.ellipsis-container {
  overflow: hidden;
  /* 隐藏超出容器范围的内容 */
  white-space: nowrap;
  /* 不换行显示文本 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}
</style>
